<!--
 * @Author: delin66
 * @Date: 2024-12-01 18:04:42
 * @LastEditors: delin66
 * @LastEditTime: 2025-01-07 14:49:46
 * @Descripttion: 
-->
<template>
  <div class="residency-application">
    <!-- 公共部分 -->
    <div class="public" v-if="!currentFormSelected">
      <el-button type="primary" :icon="Switch" @click="dialogVisible = true">选择申请类型</el-button>
    </div>
    <!-- 用于 选择申请类型对话框 -->
    <el-dialog v-model="dialogVisible" title="选择申请类型">
      <el-radio-group v-model="selectedForm">
        <el-radio label="ImmigrantEnterprise">迁入企业</el-radio>
        <el-radio label="FirstEnterprise">新成立企业</el-radio>
      </el-radio-group>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="switchForm(selectedForm)">确定</el-button>
      </template>
    </el-dialog>
    <!-- 展示相应的表单 -->
    <component :is="forms[currentForm]" :id="route.query.id as string"></component>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { Switch } from '@element-plus/icons-vue';
import { useRoute } from 'vue-router';
import 'element-plus/dist/index.css';
// 引入表单组件
import FirstEnterprise from './components/FirstEnterprise.vue'
import ImmigrantEnterprise from './components/ImmigrantEnterprise.vue'

import type { DefineComponent } from 'vue'; // 引入 DefineComponent 类型

const route = useRoute();

// 定义表单组件的映射
const forms: Record<string, DefineComponent<{}, {}, any>> = {
  FirstEnterprise,
  ImmigrantEnterprise
};

const currentForm = ref<keyof typeof forms>('ImmigrantEnterprise'); // 当前显示的表单
const dialogVisible = ref(false); // 对话框是否可见
const selectedForm = ref('ImmigrantEnterprise'); // 选中的表单
const currentFormSelected = ref(false); // 是否选择了表单

// 根据路由参数初始化表单类型
onMounted(() => {
  const type = route.query.type as string;
  const id = route.query.id as string;
  
  if (type) {
    if (type === 'immigrant') {
      currentForm.value = 'ImmigrantEnterprise';
      selectedForm.value = 'ImmigrantEnterprise';
      currentFormSelected.value = true;
    } else if (type === 'first') {
      currentForm.value = 'FirstEnterprise';
      selectedForm.value = 'FirstEnterprise';
      currentFormSelected.value = true;
    }
  }
});

// 切换表单的方法
const switchForm = (form: string) => {
  selectedForm.value = form;
  currentForm.value = form;
  dialogVisible.value = false;
  currentFormSelected.value = true;
  ElMessage.success(
    `切换到${
      form === 'ImmigrantEnterprise' ? '迁入企业申请' :  '新成立企业申请'
    }表单`
  );
};
</script>

<style lang="scss" scoped>
.public {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  .switch {
    height: 20px;
    width: 20px;
    cursor: pointer;
  }
}

.residency-application {
width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 900;

  :deep(.el-form) {
    width: 100%;
    .el-upload__tip {
      margin-top: 0;
      margin-left: 5px;
    }
  }
}

:deep(.el-upload-list__item) {
  cursor: pointer;
}
</style>
